<template>

  <div>
    <div >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>销售管理</el-breadcrumb-item>
        <el-breadcrumb-item>销售单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

<!--    <div style="float: left;margin-top: 8px;margin-bottom: 8px">-->
<!--      <el-button type="primary" @click="_add">添加</el-button>-->
<!--    </div>-->


    <div style="margin-top: 20px">

      <el-table
        :data="getPage"
        border
        height="500"
        style="width: 100%">
        <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >
          <template slot-scope="scope">
                <span v-if="item.prop==='status'">
                    {{scope.row[item.prop]===0?'草稿':''}}
                  </span>
            <span v-else>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="_lookDetail(scope.row.id)" type="text" size="small">查看</el-button>
            <el-button @click="_cancel(scope.row.id)" type="text" size="small">作废</el-button>
            <el-button @click="_salesOk(scope.row.id)" type="text" size="small">完成</el-button>
            <el-button @click="_edit(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


    </div>
    <GoodsCategoryEdit ref="goodsCategoryEditRef"  @on-result-change="_page"></GoodsCategoryEdit>


    <SalesOrderDetail ref="salesOrderDetailRef"  @on-result-change="_page"></SalesOrderDetail>
  </div>

</template>

<script>

  import  GoodsCategoryEdit from './SalesOrderDetail'
  import  SalesOrderDetail from './SalesOrderDetail'
  export default {

    mounted(){
      this._page();
    },
    components:{
      GoodsCategoryEdit,
      SalesOrderDetail
    },
    name: "Home",
    data(){
      return {

        currentPage:1, //初始页
        pageSize:10,    //    每页的数据
        total:0,    //    每页的数据
        getPage:[],
        columnName:[
          {prop:"code",label:"销售单据编码",width:"120",fixed:true},
          {prop:"status",label:"销售状态",width:"120",fixed:true},
          {prop:"customer",label:"客户名称",width:"120"},
          {prop:"cost",label:"总费用",width:"120"},
          {prop:"salesTime",label:"添加时间",width:"120"},
          {prop:"remark",label:"备注",width:"120"},
        ],
      }
    },
    methods:{
      handleClick(data){
        console.log(data);
      },

      handleSizeChange(val) {
        this.pageSize=val;
        this._page();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this._page();
      },

      _page(){
        this.$http.post('/t_sales/page?rows='+this.pageSize+'&page='+this.currentPage,{}).then(res=>{
          let data= res.data.data;
          this.getPage=data.records;
          console.log('----------------data',data)
          console.log('-----------------',data.total)
          this.total=data.total;
        }).catch(err=>{
          console.log(err)
        });
      },

      _edit(row){
        console.log(row);
        this.$refs.goodsCategoryEditRef._open(row);
      },

      _cancel(row){
        this.$confirm('是否确认作废?', '提示', {

          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'info'
        }).then(() => {

          this.$http.post('/t_sales/sales_cancel?ids='+row).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this._page();
          }).catch(err=>{
            console.log(err)
          });



        }).catch(() => {

        });
      },




      _salesOk(row){
        this.$confirm('是否确认完成?', '提示', {

          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'info'
        }).then(() => {

          this.$http.post('/t_sales/sales_end?ids='+row).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this._page();
          }).catch(err=>{
            console.log(err)
          });



        }).catch(() => {

        });
      },




      _add(){
        this.$refs.goodsCategoryEditRef._open();
      },


      _lookDetail(id){
        this.$refs.salesOrderDetailRef._open(id);
      },


    },
  }
</script>

<style scoped>

</style>
